<!--
 * @Author: JiraiyaChen 979526234@qq.com
 * @Date: 2025-02-11 09:52:27
 * @LastEditors: JiraiyaChen 979526234@qq.com
 * @LastEditTime: 2025-04-01 13:48:27
 * @Description: 评审模板设置 (加分页)
-->

<template>
  <div>
    <h1>评审模板设置</h1>
    <ClTable
      ref="refTable"
      show-index
      show-selection
      :filter-form-item="filterList"
      :table-data="postReviewTemplateList"
      :column-list="columnList"
    >
      <template #opt-btn="{ multipleSelection }">
        <el-button
          type="primary"
          plain
          :disabled="!multipleSelection.length"
          @click="handleBatchDelete(multipleSelection)"
        >
          删除
        </el-button>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </template>
      <template #column>
        <el-table-column label="操作" width="240">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">查看</el-button>
            <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </ClTable>
    <CrudDialog v-if="hookVisible" v-model="hookVisible" :info="dialogInfo" :type="type" @at-close="onCloseDialog" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import CrudDialog from './components/CrudDialog.vue'
import { COLUMN_LIST } from './data'
import { postReviewTemplateList, postTemplateInfoRemove } from '@/api/basic-settings-module'
const refTable = ref()
const columnList = ref(COLUMN_LIST)
const filterList = ref([
  {
    key: 'name',
    value: '',
    name: '模板名称',
    formType: 'input',
    verificationData: '',
    elementConfig: {
      textareaWidth: '400px'
    }
  }
])
const handleBatchDelete = async (multipleSelection) => {
  const res = await ElMessageBox.confirm('确定删除所选评审模板吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
  if (res === 'confirm') {
    await postTemplateInfoRemove(multipleSelection.map((item) => item.id))
    refTable.value.initTable()
  }
}

// curd 弹窗
const { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(refTable)
const handleView = (row) => {
  type.value = '查看评审模板'
  onOpenDialog({ disabled: true, ...row })
}
const handleEdit = (row) => {
  type.value = '编辑评审模板'
  onOpenDialog(row)
}
const handleAdd = () => {
  type.value = '新增评审模板'
  onOpenDialog({})
}
</script>

<style scoped lang="scss"></style>
